<template>
  <!-- 使用van-tabbar组件，route属性表示使用路由，fixed属性表示固定在底部，placeholder属性表示占位，border属性表示有边框 -->
  <van-tabbar route fixed placeholder border>
    <!-- 使用van-tabbar-item组件，replace属性表示替换当前路由，to属性表示跳转的路由，icon属性表示图标，badge属性表示徽标 -->
    <van-tabbar-item replace :to="{ name: 'home' }" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace :to="{ name: 'category'}" icon="apps-o">分类 </van-tabbar-item>
    <van-tabbar-item replace :to="{ name: 'message'}" icon="chat-o" badge ="4">消息</van-tabbar-item>
    <van-tabbar-item replace :to="{ name: 'cart'}" icon="shopping-cart-o " :badge="cartCount()">购物车</van-tabbar-item>
    <van-tabbar-item replace :to="{ name: 'user'}" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
// 引入useCart函数
import useCart from '../stores/cart'

// 调用useCart函数，获取cartCount函数
const { cartCount } = useCart()
</script>

<style scoped>
/* 设置van-tabbar-item组件的激活颜色 */
.van-tabbar-item {
  --van-tabbar-item-active-color: #FF8000;
}
</style>